<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>RBMH - 数据库连接测试</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        /* 统一的主题色彩系统 */
        :root {
            --primary-color: #1677ff;
            --primary-hover: #4096ff;
            --primary-light: #e6f4ff;
            --primary-text: #ffffff;
            --text-primary: #262626;
            --text-regular: #d9d9d9;
            --text-secondary: #8c8c8c;
            --border-color: #333333;
            --bg-dark: #24292e;
            --bg-darker: #1f2428;
            --bg-color: #f5f5f5;
            --bg-white: #ffffff;
            --success-color: #52c41a;
            --success-light: #f6ffed;
            --warning-color: #faad14;
            --warning-light: #fffbe6;
            --error-color: #f5222d;
            --error-light: #fff1f0;
        }

        /* 头部样式 - 白色背景 */
        .layui-layout-admin .layui-header {
            background-color: var(--bg-white);
            color: var(--text-primary);
            border-bottom: 1px solid #e8e8e8;
        }

        /* 系统名称 - 白色文字 */
        .layui-logo {
            color: var(--primary-color) !important;
            font-weight: bold;
            font-size: 18px;
        }

        /* 左侧边栏 - 深色背景 */
        .layui-side {
            background-color: var(--bg-dark);
            color: var(--text-regular);
        }

        /* 侧边栏滚动条区域 */
        .layui-side-scroll {
            background-color: var(--bg-dark);
        }

        /* 菜单项默认样式 */
        .layui-nav-tree .layui-nav-item a {
            color: var(--text-regular);
            border-radius: 0;
            margin: 0;
            transition: all 0.3s ease;
        }

        /* 菜单项悬停样式 */
        .layui-nav-tree .layui-nav-item a:hover {
            background-color: var(--bg-white);
            color: var(--text-primary);
        }

        /* 选中菜单项样式 - 蓝色背景白色文字 */
        .layui-nav-tree .layui-this a,
        .layui-nav-tree .layui-this>a,
        .layui-nav-tree .layui-nav-child dd.layui-this,
        .layui-nav-tree .layui-nav-child dd.layui-this a {
            background-color: var(--primary-color);
            color: var(--primary-text);
        }

        /* 内容区域 */
        .layui-body {
            background-color: var(--bg-color);
            overflow-y: auto;
        }

        .content-main {
            padding: 20px;
        }

        /* 菜单切换按钮 */
        .menu-toggle {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 9999;
            background-color: var(--primary-color);
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .menu-toggle:hover {
            background-color: var(--primary-hover);
        }

        /* 菜单折叠效果 */
        .menu-collapsed .layui-side {
            left: -200px;
        }

        .menu-collapsed .layui-body {
            left: 0;
        }

        .menu-collapsed .menu-toggle {
            left: 10px;
        }

        /* 卡片样式 */
        .test-card {
            background-color: var(--bg-white);
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            padding: 20px;
            margin-bottom: 20px;
            transition: box-shadow 0.3s ease;
        }

        .test-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        /* 按钮样式 */
        .layui-btn-primary {
            border-color: var(--border-color);
            color: #000000; /* 重置表单按钮字体颜色改为黑色 */
        }

        .layui-btn-primary:hover {
            border-color: var(--primary-hover);
            color: var(--primary-hover);
        }

        /* 进度条样式 */
        .layui-progress-bar {
            background-color: var(--primary-color) !important;
        }

        /* 表单样式 */
        .layui-form-label {
            color: #000000; /* 表单标签字体颜色改为黑色 */
        }

        .layui-input {
            border-color: var(--border-color);
            transition: border-color 0.3s ease;
        }

        .layui-input:focus {
            border-color: var(--primary-hover);
        }

        /* 标题样式 */
        h2 {
            color: var(--primary-color);
            margin-bottom: 16px;
            font-weight: 500;
        }

        /* 头部菜单显示区域 */
        .header-menu {
            position: absolute;
            left: 200px;
            top: 0;
            height: 60px;
            line-height: 60px;
            padding: 0 20px;
            display: flex;
            align-items: center;
        }

        /* 当前选中的菜单标题 */
        .current-menu-title {
            color: var(--primary-color);
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        /* 关闭按钮 */
        .close-menu-btn {
            margin-left: 10px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 16px;
            transition: color 0.3s ease;
        }

        .close-menu-btn:hover {
            color: var(--error-color);
        }

        /* 遮罩层 */
        .address-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 高斯数据连接测试左右布局 */
        .gauss-layout {
            display: flex;
            gap: 20px;
        }

        /* 左侧测试面板 - 调整宽度比例 */
        .gauss-left-panel {
            flex: 2; /* 左侧占2份 */
            min-width: 0;
        }

        /* 右侧预留区域 - 调整宽度比例 */
        /*.gauss-right-panel {
            flex: 3; !* 右侧占3份，比左侧更宽 *!
            min-height: 400px;
            border: 1px dashed var(--border-color);
            border-radius: 8px;
            padding: 20px;
            background-color: rgba(240, 242, 245, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }*/
        .gauss-right-panel {
            flex: 3; /* 右侧占3份，比左侧更宽 */
            min-height: 400px;
            border: 1px dashed var(--border-color);
            border-radius: 8px;
            padding: 20px;
            background-color: rgba(240, 242, 245, 0.5);
            display: flex;
            flex-direction: column; /* 垂直排列 */
            align-items: flex-start; /* 关键：交叉轴（水平方向）靠左对齐 */
            justify-content: flex-start; /* 主轴（垂直方向）顶部开始排列，可选 */
            gap: 10px; /* 元素之间的垂直间距，可选 */
        }

        .placeholder-text {
            color: var(--text-secondary);
            text-align: center;
        }

        /* 响应式调整 */
        @media (max-width: 1024px) {
            .gauss-layout {
                flex-direction: column;
            }

            .gauss-left-panel,
            .gauss-right-panel {
                flex: none;
                width: 100%;
            }

            .gauss-right-panel {
                min-height: 200px;
            }
        }

        /* 按钮组样式 */
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        /* 分页信息容器 - 核心优化 */
        .page-info-container {
            margin: 8px 0 0 10px; /* 距离表格左侧10px，顶部8px */
            line-height: 1; /* 统一行高 */
            display: inline-block; /* 改为行内块元素 */
        }

        /* 分页容器 - 将分页信息和分页控件放在同一行 */
        #pagination {
            display: inline-block; /* 改为行内块元素 */
            margin-right: 20px; /* 与右侧信息保持间距 */
        }

        /* 分页包装容器 - 用于包含分页控件和分页信息 */
        .pagination-wrapper {
            text-align: right; /* 整体右对齐 */
            margin-top: 10px;
        }

        /* 分页信息项 - 完全自定义样式，摆脱layui-form-label默认样式 */
        .page-info-item {
            display: inline-block;
            margin: 0 !important; /* 清除所有外边距 */
            padding: 0 6px !important; /* 仅保留小内边距 */
            font-size: 12px; /* 适合的字体大小 */
            color: #666; /* 适中的颜色 */
            border: none !important; /* 移除默认边框 */
            background: none !important; /* 移除默认背景 */
        }

        /* 分隔线样式 - 更紧凑的视觉分隔 */
        .page-info-separator {
            color: #ccc;
            margin: 0 2px;
        }
    </style>
</head>
<body class="layui-layout-body">

<!-- 地址信息弹窗 - 页面加载时显示 -->
<div id="address-modal" class="address-modal-overlay">
    <div style="width: 500px; background: white; padding: 20px; border-radius: 8px;">
        <h3 style="text-align: center; margin-bottom: 20px; color: var(--primary-color);">请填写地址信息</h3>
        <form class="layui-form" id="address-form">
            <div class="layui-form-item">
                <label class="layui-form-label">省份</label>
                <div class="layui-input-block">
                    <input type="text" name="province" lay-verify="required" placeholder="请输入省份" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-block">
                    <input type="text" name="city" lay-verify="required" placeholder="请输入城市" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区域</label>
                <div class="layui-input-block">
                    <input type="text" name="district" lay-verify="required" placeholder="请输入区/县" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" name="detailAddress" lay-verify="required" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <button class="layui-btn" lay-submit lay-filter="address-submit" style="background-color: var(--primary-color);">确认提交</button>
            </div>
        </form>
    </div>
</div>

<div class="layui-layout layui-layout-admin">
    <!-- 头部 -->
    <div class="layui-header">
        <div class="layui-logo">测试系统</div>
        <!-- 头部菜单显示区域 -->
        <div class="header-menu">
        <span id="current-menu-display" class="current-menu-title" style="display: none;">
          <span id="current-menu-text"></span>
          <i class="layui-icon close-menu-btn" id="close-menu-btn">&#x1006;</i>
        </span>
        </div>
    </div>

    <!-- 侧边栏 -->
    <div class="layui-side">
        <div class="layui-side-scroll">
            <!-- 左侧导航 - 平铺显示 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a href="javascript:;" data-content="network">
                        <i class="layui-icon layui-icon-website"></i>
                        <span>网络可达测试</span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-content="gauss">
                        <i class="layui-icon layui-icon-vercode"></i>
                        <span>数据连接测试</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="layui-body">
        <div class="content-main">
            <!-- 默认显示的内容 -->
            <div id="default-content" class="content-item test-card">
                <h2>欢迎使用网络测试系统</h2>
                <p style="color: var(--text-secondary);">请从左侧菜单选择要执行的网络测试功能</p>
                <div style="margin-top: 20px; padding: 10px; background-color: #e6f4ff; border-left: 4px solid var(--primary-color);">
                    <p>当前使用的地址信息:</p>
                    <p>省份: <span id="display-province">未设置</span></p>
                    <p>城市: <span id="display-city"> </span></p>
                    <p>区域: <span id="display-district">未设置</span></p>
                    <p>详细地址: <span id="display-detail-address">未设置</span></p>
                    <button id="update-address-btn" class="layui-btn layui-btn-sm" style="margin-top: 10px; background-color: var(--primary-color);">修改地址信息</button>
                </div>
            </div>

            <!-- 网络可达测试内容 -->
            <div id="network-content" class="content-item test-card" style="display: none;">
                <!--                <h2>网络可达测试</h2>-->
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">目标IP</label>
                        <div class="layui-input-block">
                            <input type="text" name="ip" lay-verify="required" placeholder="请输入目标IP地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="network-test" style="background-color: var(--primary-color);">开始测试</button>
                        </div>
                    </div>
                </form>
                <div id="network-result" style="margin-top: 20px;"></div>
            </div>

            <!-- 高斯数据连接测试内容 - 左右两侧布局 -->
            <div id="gauss-content" class="content-item test-card" style="display: none;">
                <!--                <h2>高斯数据连接测试</h2>-->

                <!-- 左右布局容器 -->
                <div class="gauss-layout">
                    <!-- 左侧测试面板 -->
                    <div class="gauss-left-panel">
                        <form class="layui-form" id="gauss-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="db-host" lay-verify="required" placeholder="请输入数据库地址" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库端口</label>
                                <div class="layui-input-block">
                                    <input type="number" name="db-port" lay-verify="required" placeholder="请输入数据库端口" autocomplete="off" class="layui-input" value="3306">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="db-name" lay-verify="required" placeholder="请输入数据库名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="db-user" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="db-password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block button-group">
                                    <button type="button" id="reset-form-btn" class="layui-btn layui-btn-primary">重置表单</button>
                                    <button class="layui-btn" lay-submit lay-filter="gauss-test" style="background-color: var(--primary-color);">测试连接</button>
                                </div>
                            </div>
                        </form>
                        <div id="gauss-result" style="margin-top: 20px;"></div>
                    </div>

                    <!-- 右侧预留空白区域 -->
                    <div class="gauss-right-panel">
                        <!--<div class="placeholder-text">
                            <p>右侧预留区域</p>
                            <p style="font-size: 12px; margin-top: 5px;">可在此添加自定义内容</p>
                        </div>-->

                        <!-- 查询区域 -->
                        <div class="layui-form-item" style="margin-bottom: 15px;">
                            <form class="layui-form" lay-filter="searchForm">
                                <div class="layui-inline">
                                    <label class="layui-form-label">数据库地址</label>
                                    <div class="layui-input-inline" style="width: 200px;">
                                        <input type="text" name="ipAddress" placeholder="请输入数据库地址" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <button class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </form>
                        </div>

                        <!-- 数据表格 -->
                        <table class="layui-table" lay-size="sm" id="userTable">
                            <thead>
                            <tr>
                                <th>数据库地址</th>
                                <th>省份</th>
                                <th>地市</th>
                                <th>区县</th>
                                <th>具体地址</th>
                                <th>数据库端口</th>
                                <th>数据库名称</th>
                                <th>用户名</th>
                                <th>密码</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="dbTableBody">
                            <!-- JS 动态填充数据 -->
                            </tbody>
                        </table>

                        <!-- 分页区域 -->
                        <div class="pagination-wrapper">
                            <div class="layui-box layui-laypage layui-laypage-default" id="pagination"></div>
                            <!-- 分页信息（最终优化版） -->
                            <div class="page-info-container" id="pageInfo"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- body 末尾处引入 layui -->
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['element', 'form', 'layer'], function(){
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 检查是否已有地址信息
            function checkAddressInfo() {
                var addressInfo = localStorage.getItem('addressInfo');
                if (addressInfo) {
                    try {
                        addressInfo = JSON.parse(addressInfo);
                        if (addressInfo.province && addressInfo.city && addressInfo.district && addressInfo.detailAddress) {
                            // 显示地址信息
                            updateDisplayAddress(addressInfo);
                            // 隐藏弹窗
                            $('#address-modal').hide();
                            return addressInfo;
                        }
                    } catch (e) {
                        console.error('解析地址信息失败', e);
                    }
                }
                return null;
            }

            // 更新显示的地址信息
            function updateDisplayAddress(addressInfo) {
                $('#display-province').text(addressInfo.province);
                $('#display-city').text(addressInfo.city);
                $('#display-district').text(addressInfo.district);
                $('#display-detail-address').text(addressInfo.detailAddress);
            }

            // 地址表单提交
            form.on('submit(address-submit)', function(data) {
                // 保存地址信息到localStorage
                localStorage.setItem('addressInfo', JSON.stringify(data.field));

                // 更新显示的地址信息
                updateDisplayAddress(data.field);

                // 隐藏弹窗，允许用户访问页面
                $('#address-modal').hide();

                // 提示保存成功
                layer.msg('地址信息保存成功', {icon: 6});

                return false;
            });

            // 修改地址信息按钮点击事件
            $('#update-address-btn').click(function() {
                // 显示地址弹窗
                $('#address-modal').show();

                // 填充已有的地址信息
                var addressInfo = localStorage.getItem('addressInfo');
                if (addressInfo) {
                    try {
                        addressInfo = JSON.parse(addressInfo);
                        $.each(addressInfo, function(key, value) {
                            var $elem = $('[name="' + key + '"]');
                            $elem.val(value);
                        });
                        form.render();
                    } catch (e) {
                        console.error('填充地址信息失败', e);
                    }
                }
            });

            // 获取地址信息（用于接口请求）
            function getAddressInfo() {
                var addressInfo = localStorage.getItem('addressInfo');
                if (addressInfo) {
                    try {
                        return JSON.parse(addressInfo);
                    } catch (e) {
                        console.error('解析地址信息失败', e);
                    }
                }
                return null;
            }

            // 菜单显示隐藏功能
            var isMenuCollapsed = false;

            // 添加菜单切换按钮
            var toggleBtn = $('<button class="menu-toggle">☰</button>');
            $('body').append(toggleBtn);

            toggleBtn.click(function() {
                isMenuCollapsed = !isMenuCollapsed;
                if (isMenuCollapsed) {
                    $('body').addClass('menu-collapsed');
                    toggleBtn.html('☰');
                } else {
                    $('body').removeClass('menu-collapsed');
                    toggleBtn.html('☰');
                }
            });

            // 菜单点击事件
            $('.layui-nav-item a').click(function() {
                var contentId = $(this).data('content');
                var menuText = $(this).find('span').text();

                // 移除所有菜单项的选中状态
                $('.layui-nav-item').removeClass('layui-this');
                // 添加当前菜单项的选中状态
                $(this).parent().addClass('layui-this');

                // 隐藏所有内容
                $('.content-item').hide();

                // 显示选中的内容
                if (contentId) {
                    $('#' + contentId + '-content').show();
                    // 在头部显示选中的菜单名称
                    $('#current-menu-text').text(menuText);
                    $('#current-menu-display').show();
                } else {
                    $('#default-content').show();
                    $('#current-menu-display').hide();
                }
            });

            // 关闭菜单显示
            $('#close-menu-btn').click(function() {
                // 移除所有菜单项的选中状态
                $('.layui-nav-item').removeClass('layui-this');
                // 隐藏所有内容
                $('.content-item').hide();
                // 显示默认内容
                $('#default-content').show();
                // 隐藏头部菜单显示
                $('#current-menu-display').hide();
            });

            // 网络可达测试表单提交
            form.on('submit(network-test)', function(data) {
                // 获取地址信息
                var addressInfo = getAddressInfo();
                if (!addressInfo) {
                    layer.msg('请先填写地址信息', {icon: 5});
                    $('#address-modal').show();
                    return false;
                }

                var ip = data.field.ip;
                // var port = data.field.port;
                // var address = addressInfo.detailAddress + ',' + addressInfo.district + ',' + addressInfo.city + ',' + addressInfo.province;

                // 显示进度条
                $('#network-result').html('<div class="layui-progress layui-progress-big"><div class="layui-progress-bar" lay-percent="0%"></div></div>');
                element.render('progress');

                // console.log('网络测试请求参数:', {address: address, ip: ip, port: port});

                // 模拟进度更新
                var progress = 0;
                var progressTimer = setInterval(function() {
                    progress += 10;
                    $('.layui-progress-bar').attr('lay-percent', progress + '%');
                    element.render('progress');

                    if (progress >= 100) {
                        clearInterval(progressTimer);
                    }
                }, 100);

                // 实际调用后端API
                $.ajax({
                    url: '/api/network/ping',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ipAddress: ip, province: addressInfo.province, city: addressInfo.city, district: addressInfo.district, detailAddress: addressInfo.detailAddress}),
                    success: function(result) {
                        clearInterval(progressTimer);
                        $('.layui-progress-bar').attr('lay-percent', '100%');
                        element.render('progress');

                        setTimeout(function() {
                            // 显示测试结果
                            var resultHtml = '';
                            console.log('网络测试返回:', result);
                            if (result.code === 200) {
                                resultHtml = '<div class="layui-alert" style="background-color: var(--success-light); border-color: #B7EB8F; color: var(--success-color); margin-top: 20px;">测试成功！IP: ' + ip + ' 可达。</div>';
                            } else {
                                resultHtml = '<div class="layui-alert" style="background-color: var(--error-light); border-color: #FFCCC7; color: var(--error-color); margin-top: 20px;">测试失败！IP: ' + ip + ' 不可达。' + (result.msg ? ' ' + result.msg : '') + '</div>';
                            }
                            $('#network-result').html(resultHtml);
                        }, 300);
                    },
                    error: function(xhr) {
                        clearInterval(progressTimer);
                        $('.layui-progress-bar').attr('lay-percent', '100%');
                        element.render('progress');

                        setTimeout(function() {
                            $('#network-result').html('<div class="layui-alert" style="background-color: var(--error-light); border-color: #FFCCC7; color: var(--error-color); margin-top: 20px;">请求失败！' + xhr.statusText + '</div>');
                        }, 300);
                    }
                });

                return false; // 阻止表单跳转
            });

            // 重置表单按钮点击事件
            $('#reset-form-btn').click(function() {
                $('#gauss-form')[0].reset();
                $('#gauss-result').empty();
                form.render();
                layer.msg('表单已重置', {icon: 1});
            });

            // 高斯数据连接测试表单提交
            form.on('submit(gauss-test)', function(data) {
                // 获取地址信息
                var addressInfo = getAddressInfo();
                if (!addressInfo) {
                    layer.msg('请先填写地址信息', {icon: 5});
                    $('#address-modal').show();
                    return false;
                }

                var host = data.field['db-host'];
                var port = data.field['db-port'];
                var dbName = data.field['db-name'];
                var user = data.field['db-user'];
                var password = data.field['db-password'];

                // 显示进度条
                $('#gauss-result').html('<div class="layui-progress layui-progress-big"><div class="layui-progress-bar" lay-percent="0%"></div></div>');
                element.render('progress');

                // 构建请求参数
                var requestData = {
                    province: addressInfo.province,
                    city: addressInfo.city,
                    district: addressInfo.district,
                    detailAddress: addressInfo.detailAddress,
                    ipAddress: host,
                    port: port,
                    dbName: dbName,
                    username: user,
                    password: password
                };

                console.log('数据连接测试请求参数:', requestData);

                // 模拟进度更新
                var progress = 0;
                var progressTimer = setInterval(function() {
                    progress += 10;
                    $('.layui-progress-bar').attr('lay-percent', progress + '%');
                    element.render('progress');
                    
                    if (progress >= 100) {
                        clearInterval(progressTimer);
                    }
                }, 100);

                // 实际调用后端API
                $.ajax({
                    url: '/api/network/dbconnect',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(requestData),
                    success: function(result) {
                        clearInterval(progressTimer);
                        $('.layui-progress-bar').attr('lay-percent', '100%');
                        element.render('progress');
                        
                        setTimeout(function() {
                            // 显示测试结果
                            var resultHtml = '';
                            if (result.code === 200) {
                                resultHtml = '<div class="layui-alert" style="background-color: var(--success-light); border-color: #B7EB8F; color: var(--success-color); margin-top: 20px;">连接成功！数据库连接测试通过。</div>';
                            } else {
                                resultHtml = '<div class="layui-alert" style="background-color: var(--error-light); border-color: #FFCCC7; color: var(--error-color); margin-top: 20px;">连接失败！请检查数据库配置信息。' + (result.msg ? ' ' + result.msg : '') + '</div>';
                            }
                            $('#gauss-result').html(resultHtml);
                        }, 300);
                    },
                    error: function(xhr) {
                        clearInterval(progressTimer);
                        $('.layui-progress-bar').attr('lay-percent', '100%');
                        element.render('progress');
                        
                        setTimeout(function() {
                            $('#gauss-result').html('<div class="layui-alert" style="background-color: var(--error-light); border-color: #FFCCC7; color: var(--error-color); margin-top: 20px;">请求失败！' + xhr.statusText + '</div>');
                        }, 300);
                    }
                });

                return false; // 阻止表单跳转
            });

            // 页面加载时检查地址信息
            $(document).ready(function() {
                checkAddressInfo();

                // 欢迎信息
                if (!$('#address-modal').is(':visible')) {
                    layer.msg('欢迎使用测试系统', {icon: 6});
                }
            });
        });


        layui.use(['element', 'laypage', 'jquery', 'form', 'layer'], function(){
            const element = layui.element;
            const laypage = layui.laypage;
            const $ = layui.jquery;
            const form = layui.form;
            const layer = layui.layer;

            // 分页与查询参数
            let currentPage = 1;
            const pageSize = 10;
            let searchParams = {};

            // 初始加载数据
            loadPageData(currentPage);

            // 加载分页数据
            function loadPageData(pageNum) {

                // 获取地址信息
                // const addressInfo = getAddressInfo();
                // 获取地址信息 - 直接实现获取逻辑，避免函数调用问题
                let addressInfo = null;
                try {
                    const storedInfo = localStorage.getItem('addressInfo');
                    if (storedInfo) {
                        addressInfo = JSON.parse(storedInfo);
                    }
                } catch (e) {
                    console.error('解析地址信息失败', e);
                }
                
                const params = {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    // 添加地址信息作为默认查询参数
                    ...(addressInfo ? {
                        province: addressInfo.province,
                        city: addressInfo.city,
                        district: addressInfo.district,
                        detailAddress: addressInfo.detailAddress
                    } : {}),
                    ...searchParams
                };

                $.ajax({
                    url: '/api/network/selectByPage',
                    type: 'POST',
                    data: JSON.stringify(params),
                    contentType: 'application/json',
                    success: function (result) {
                        const tableBody = $("#dbTableBody");
                        tableBody.empty();

                        if (result.data.list && result.data.list.length > 0) {
                            result.data.list.forEach(item => {
                                const row = `<tr data-id="${item.id || ''}"> <!-- 将id存储在data属性中但不直接显示 -->
                                <td>${item.ipAddress || '无'}</td>
                                <td>${item.province || '无'}</td>
                                <td>${item.city || '无'}</td>
                                <td>${item.district || '无'}</td>
                                <td>${item.detailAddress || '无'}</td>
                                <td>${item.port || '无'}</td>
                                <td>${item.dbName || '无'}</td>
                                <td>${item.username || '无'}</td>
                                <td>${item.password || '无'}</td>
                                <td>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger delete-btn"
                                            data-id="${item.id}">
                                        删除
                                    </button>
                                </td>
                            </tr>`;
                                tableBody.append(row);
                            });
                            bindActionEvents();
                        } else {
                            tableBody.append('<tr><td colspan="10" class="text-center">暂无数据</td></tr>');
                        }

                        // 核心修改：使用自定义样式类，移除layui-form-label
                        $("#pageInfo").html(`
                        <span class="page-info-item">当前第 ${result.data.pageNum || 0} 页</span>
                        <span class="page-info-separator">|</span>
                        <span class="page-info-item">共 ${result.data.pages || 0} 页</span>
                        <span class="page-info-separator">|</span>
                        <span class="page-info-item">总记录数 ${result.data.total || 0} 条</span>
                    `);

                        // 渲染分页控件 - 修复：传入总记录数而不是总页数
            renderPagination(result.data.total || 0, result.data.pages || 0);
                    },
                    error: function (xhr) {
                        layer.msg(`数据加载失败：${xhr.statusText}`, {icon: 5});
                    }
                });
            }

            // 渲染分页 - 修复：增加totalRecords参数
            function renderPagination(totalRecords, totalPages) {
                const pagination = $("#pagination");
                pagination.empty();

                if (totalPages <= 0) {
                    pagination.html('<div class="layui-laypage-count">暂无分页数据</div>');
                    return;
                }

                laypage.render({
                    elem: 'pagination',
                    count: totalRecords,  // 修复：使用总记录数
                    limit: pageSize,
                    curr: currentPage,
                    layout: ['prev', 'page', 'next', 'count'],
                    jump: function(obj, first){
                        if (!first) {
                            currentPage = obj.curr;
                            loadPageData(currentPage);
                        }
                    }
                });
            }

            // 查询表单提交
            form.on('submit(searchBtn)', function(data){
                searchParams = data.field;
                currentPage = 1;
                loadPageData(currentPage);
                return false;
            });

            // 绑定修改和删除按钮事件
            function bindActionEvents() {
                $('.edit-btn').off('click').on('click', function(){
                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    const age = $(this).data('age');

                    const index = layer.open({
                        title: '修改用户',
                        type: 1,
                        content: `
                        <form class="layui-form" lay-filter="editForm" style="padding: 20px;">
                            <input type="hidden" name="id" value="${id}">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" value="${name}"
                                           class="layui-input" required lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input type="number" name="age" value="${age}"
                                           class="layui-input" required lay-verify="required|number">
                                </div>
                            </div>
                        </form>
                    `,
                        area: ['400px', '300px'],
                        btn: ['确认', '取消'],
                        yes: function(modalIndex){
                            const isValid = form.validate('editForm');

                            if (isValid) {
                                const editData = form.val('editForm');
                                console.log('修改数据:', editData);

                                layer.close(modalIndex);
                                loadPageData(currentPage);
                                layer.msg('修改成功', {icon: 6});
                            }
                        }
                    });
                });

                $('.delete-btn').off('click').on('click', function(){
                    const id = $(this).data('id');
                    layer.confirm(`确定要删除数据连接信息ID: ${id} 的数据吗?`, {
                        icon: 3,
                        title: '确认删除'
                    }, function(confirmIndex){
                        // 关闭确认对话框
                        layer.close(confirmIndex);
                        
                        // 显示加载中提示
                        const loadingIndex = layer.load(2);
                        
                        // 发送POST请求到/deleteById接口
                        $.ajax({
                            url: '/api/network/deleteById',
                            type: 'POST',
                            data: JSON.stringify({ id: id }),
                            contentType: 'application/json',
                            success: function(result) {
                                // 关闭加载提示
                                layer.close(loadingIndex);
                                
                                // 检查删除是否成功
                                if (result && result.success) {
                                    // 删除成功，刷新数据并显示成功提示
                                    layer.msg('删除成功', {icon: 6});
                                    loadPageData(currentPage);
                                } else {
                                    // 删除失败，显示失败提示
                                    layer.msg(result && result.msg ? result.msg : '删除失败', {icon: 5});
                                }
                            },
                            error: function(xhr, status, error) {
                                // 关闭加载提示
                                layer.close(loadingIndex);
                                
                                // 显示网络请求错误提示
                                layer.msg(`删除失败：${xhr.statusText}`, {icon: 5});
                            }
                        });
                    });
                });
            }
        });
    </script>
</body>
</html>